<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 让页面自适应布局 -->
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <!-- 引入favicon图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link href="css/style.css" rel="stylesheet">
    <!-- 引入字体样式css -->
    <link rel="stylesheet" href="font/fonts/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <!-- <script src="js/animate.js"></script> -->
    <title>小米商城</title>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <ul class="mainList">
            <li>小米官网</li>
            <li>小米商城</li>
            <li>MIUI</li>
            <li>IoT</li>
            <li>云服务</li>
            <li>天星数科</li>
            <li>有品</li>
            <li>小爱开放平台</li>
            <li>企业团购</li>
            <li>资质证照</li>
            <li>协议规则</li>
            <li>下载app</li>
            <li>Select Location</li>
        </ul>
        <ul class="registerList">
            <li>登录</li>
            <li>注册</li>
            <li>消息通知</li>
        </ul>
        <div class="gwc">
            <span class="gwcIcon">&#xe61f;</span>
            购物车(0)
        </div>
    </div>
    <!-- 头部，搜索框 -->
    <div class="head">
        <div class="icon">
            <img src="favicon.ico" width="56px" height="56px" />
        </div>
        <ul class="spList">
            <li>Xiaomi手机</li>
            <li>Redmi手机</li>
            <li>电视</li>
            <li>笔记本</li>
            <li>平板</li>
            <li>家电</li>
            <li>路由器</li>
            <li>服务中心</li>
            <li>社区</li>
        </ul>
        <div class="search">
            <input type="text" name="search" placeholder="请输入你的关键词" id="sfor">
        </div>
        <div class="commit">
            <input type="button" name="commit" id="cmt">
            <span class="iconfont">&#xe653;</span>
        </div>
    </div> <!-- 主题，以及下拉菜单的制作 -->
    <div class="bodys">
        <div class="List">
            <ul>
                <li><a href="#">手机<span class="List-iconfont">&#xe615;</span></a></li>
                <li><a href="#">电视<span class="List-iconfont">&#xe615;</span></a></li>
                <li><a href="#">笔记本 平板<span class="List-iconfont">&#xe615;</span></a></li>
                <li><a href="#">出行 穿戴<span class="List-iconfont">&#xe615;</span></a></li>
                <li><a href="#">耳机 音箱<span class="List-iconfont">&#xe615;</span></a></li>
                <li><a href="#">家电<span class="List-iconfont">&#xe615;</span></a></li>
                <li><a href="#">智能 路由器<span class="List-iconfont">&#xe615;</span></a></li>
                <li><a href="#">电源 配件<span class="List-iconfont">&#xe615;</span></a></li>
                <li><a href="#">健康 儿童<span class="List-iconfont">&#xe615;</span></a></li>
                <li><a href="#">生活 箱包<span class="List-iconfont">&#xe615;</span></a></li>
            </ul>
        </div>
        <div class="lb">
            <a href="javascript:;" class="arrow-l arrow-l-iconfont">
                &#xe614;
            </a>
            <a href="javascript:;" class="arrow-r arrow-r-iconfont">&#xe615;</a>
            <ul class="ulList">
                <li><img src="images/3.jpg"></li>
                <li><img src="images/1.jpg"></li>
                <li><img src="images/2.jpg"></li>
                <li><img src="images/4.jpg"></li>
                <li><img src="images/5.jpg"></li>
            </ul>
            <ol>
            </ol>
        </div>
    </div>
    <div class="shoping">
        <div class="service">
            <div class="baoxiu">&#xe64f;
                <span>保障服务</span>
            </div>
            <div class="compony">&#xe56a;
                <span>企业团购</span>
            </div>
            <div class="recovery">&#xe668;
                <span>以旧换新</span>
            </div>
            <div class="phone">&#xe665;
                <span>电话</span>
            </div>
            <div class="email">&#xe619;
                <span>邮箱</span>
            </div>
            <div class="gefu">&#xe635;
                <span>客服</span>
            </div>
        </div>
        <div class="zs1">
            <img src="images/模块1.jpg" width="315px" height="170px">
        </div>
        <div class="zs2">
            <img src="images/模块2.jpg" width="315px" height="170px">
        </div>
        <div class="zs3">
            <img src="images/模块3.jpg" width="315px" height="170px">
        </div>
    </div>
    <div class="fg">
        <div class="navImage">
            <img src="images/模块4.jpg" width="1240px" height="120px">
        </div>
        <div class="iphone">
            <div class="title"><span class="t1">手机</span><span class="t2">查看更多</span><span
                    class="rightRedirect">&#xe615;</span></div>
            <div class="phoneList">
                <ul>
                    <li class="mLi"><a href="#"><img src="images/phone/1 (1).jpeg" width="234px" height="614px"></a>
                    </li>
                    <li><a href="#"><img src="images/phone/1 (2).jpeg"></a></li>
                    <li><a href="#"><img src="images/phone/1 (3).jpeg"></a></li>
                    <li><a href="#"><img src="images/phone/1 (4).jpeg"></a></li>
                    <li><a href="#"><img src="images/phone/1 (5).jpeg"></a></li>
                    <li><a href="#"><img src="images/phone/1 (6).jpeg"></a></li>
                    <li><a href="#"><img src="images/phone/1 (7).jpeg"></a></li>
                    <li><a href="#"><img src="images/phone/1 (8).jpeg"></a></li>
                    <li><a href="#"><img src="images/phone/1 (9).jpeg"></a></li>
                </ul>
            </div>
        </div>
        <div class="AfterSales">
            <div class="SalesList">
                <ul>
                    <li><a href="#"><span class="bShou">&#xe60e; </span>预约维修服务</a></li>
                    <li><a href="#"><span class="bShou">&#xe609; </span>7天无理由退货</a></li>
                    <li><a href="#"><span class="bShou">&#xe60b; </span>15天免费换货</a></li>
                    <li><a href="#"><span class="bShou">&#xe60c; </span>满69元包邮</a></li>
                    <li><a href="#"><span class="bShou">&#xe622; </span>1100余家售后网点</a></li>
                </ul>
            </div>
            <hr class="line">
            <div class="list">
                <ul>
                    <li><a class="wFont">选购指南</a></li>
                    <li><a>手机</a></li>
                    <li><a>电视</a></li>
                    <li><a>笔记本</a></li>
                    <li><a>平板</a></li>
                    <li><a>穿戴</a></li>
                    <li><a>耳机</a></li>
                    <li><a>家电</a></li>
                    <li><a>路由器</a></li>
                    <li><a>音箱</a></li>
                    <li><a>配件</a></li>
                </ul>
                <ul class="ful">
                    <li><a class="wFont">服务中心</a></li>
                    <li><a>申请售后</a></li>
                    <li><a>售后政策</a></li>
                    <li><a>维修服务价格</a></li>
                    <li><a>订单查询</a></li>
                    <li><a>以旧换新</a></li>
                    <li><a>保障服务</a></li>
                    <li><a>防伪查询</a></li>
                    <li><a>F码通道</a></li>
                </ul>
                <ul class="sul">
                    <li><a class="wFont">线下门店</a></li>
                    <li><a>小米之家</a></li>
                    <li><a>服务网点</a></li>
                    <li><a>授权体验店/专区</a></li>
                </ul>
                <ul class="tul">
                    <li><a class="wFont">关于小米</a></li>
                    <li><a>了解小米</a></li>
                    <li><a>加入小米</a></li>
                    <li><a>投资者关系</a></li>
                    <li><a>环境，社会及管治</a></li>
                    <li><a>廉洁举报</a></li>
                </ul>
                <ul class="frul">
                    <li><a class="wFont">关注我们</a></li>
                    <li><a>新浪微博</a></li>
                    <li><a>官方微信</a></li>
                    <li><a>联系我们</a></li>
                    <li><a>公益基金会</a></li>
                </ul>
                <div class="list-right">
                    <div class="list-right-service1">
                        <span>400-100-5678</span>
                    </div>
                    <div class="list-right-service2">
                        <span>8:00-18:00（仅收市话费）</span>
                    </div>
                    <div class="list-right-service3">
                        <span class="list-right-service3-iconfont">&#xe60f;</span><span
                            class="list-right-service3-font">人工客服</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- 引入轮播图的js文件 -->
<script src="js/animate.js"></script>
<script src="js/index.js"></script>
<script href="js/action.js"></script>

</html>